import React, { Component } from 'react';
import styles from './Report.less';
import { connect } from 'dva';
import getUrlParam from '@/utils/getUrlParam';

@connect(({ report }) => ({
  ReportData: report.ReportData,
}))
class Report extends Component {
  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({
      type: 'report/getReportData',
      payload: {
        api_type: 'report',
        page_num: 1,
        page_size: 10,
      },
    });
  }

  render() {
    let { ReportData } = this.props;
    let renderReport = () => {
      let res = [];
      if (!ReportData) {
        return res;
      }
      for (let i = 0; i < ReportData.data.data_list.length; i++) {
        res.push(
          <div key={i} className={styles.goodsCard}>
            <div className={styles.reportImg}>
              <img
                src={ReportData.data.data_list[i].img_url}
                alt={ReportData.data.data_list[i].name}
              />
            </div>
            <div className={styles.reportTitle}>{ReportData.data.data_list[i].name}</div>
            <div className={styles.reportDesc}>{ReportData.data.data_list[i].desc}</div>
            <div className={styles.reportButtonWrap}>
              <a
                href={ReportData.data.data_list[i].pdf_url}
                className={styles.reportLink}
                target="_blank"
                rel="noopener noreferrer"
              >
                查看
              </a>
              <div className={styles.reportBuy}>购买</div>
            </div>
          </div>
        );
      }
      return res;
    };

    return (
      <div>
        <div className={styles.mainBanner}>
          <p className={styles.mainBannerText}>
            为您提供综合评价、财务动态、舆情定制、竞品分析等报告范本，信息评估更高效更快捷。
          </p>
        </div>
        <div className={styles.listWrap}>{renderReport()}</div>
      </div>
    );
  }
}

export default Report;
